<template>
  <div class="zs-card zs-layout-flex-col" :class="cardClass">
    <CardTitle :title="props.title" :isMore="props.isMore" :rightTip="props.rightTip" @onMore="goDetail"></CardTitle>
    <CardTab :tabs="props.tabs" :curTab="props.curTab" :tabRight="props.tabRight" @onChange="changeTab"></CardTab>
    <GrayCard v-if="props.grayCardList && props.grayCardList.length" :list="props.grayCardList"></GrayCard>
    <BarLineEchart class="zs-layout-grow zs-overflow-auto" :echartId="props.echartId" :echartData="props.echartData" :isInCard="true"></BarLineEchart>
    <LegendDes :lineText="props.lineText" :barText="props.barText" :unitText="props.unitText" :updateText="props.updateText"></LegendDes>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CardTitle from '@/DbUiComponents/cardTitle'
import CardTab from '@/DbUiComponents/cardTab'
import GrayCard from '@/DbUiComponents/grayCard'
import BarLineEchart from "@/components/EchartComponent/BarLineEchart";
import LegendDes from '@/DbUiComponents/legendDes'

const props = defineProps({
  cardClass: {
        type: Array,
        required: false,
        default: () => { return [] }
    },
  title: {
    type: String,
    required: false,
    default: ''
  },
  isMore: {
    type: Boolean,
    required: false,
    default: true
  },
  rightTip: {
    type: Object,
    required: false,
    default: () => { return { text: '', className: '' } }
  },
  tabs: {
    type: Array,
    required: false,
    default: () => [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }]
  },
  curTab: {
    type: String,
    required: false,
    default: '日'
  },
  tabRight: {
    type: String,
    required: false,
    default: ''
  },
  grayCardList: {
    type: Array,
    required: false,
    default: () => []
  },
  echartId: {
    type: String,
    required: false,
    default: 'myEChartsBar'
  },
  echartData: {
    type: Object,
    required: false,
    default: () => { return { } }
  },
  lineText: {
    type: String,
    required: false,
    default: ''
  },
  barText: {
    type: String,
    required: false,
    default: ''
  },
  unitText: {
    type: String,
    required: false,
    default: ''
  },
  updateText: {
    type: String,
    required: false,
    default: ''
  }
})
const emit = defineEmits(["onMore", "onChange"]);
const goDetail = () => {
  emit("onMore");
}

let isCanClick = ref(true)
const changeTab = (value) => {
  if (isCanClick.value) {
    emit("onChange", value);
    isCanClick.value = false
  }
  setTimeout(() => {
    isCanClick.value = true
  }, 1000);
}

</script>

<style scoped lang="scss"></style>
